<template>
	<!--        将要在这里设置背景图片-->
	<div id="app">
		<v-app id="inspire">
			<!--应用程序栏-->
			<!-- 		<v-app-bar app color="white">
			<v-list-item-title style="text-align: center;font-size:18px;color:white;">房客</v-list-item-title>
						<span @click="search = true" style="position:absolute;z-index:100;left:5px"><icon name="position" scale="2" color="white" @click="search = true"></icon>厦门</span>
			</v-app-bar> -->
				<!--可以使用绝对定位position:absolute;z-index:2;-->
				<!-- <el-carousel :interval="5000" arrow="never">
					<el-carousel-item v-for="(image,value) in itemImage" :key="value">
						<img :src=image width="100%" height="100%">
					</el-carousel-item>
				</el-carousel>-->

				<!-- 绝对定位 -->
				<!-- 	  <v-app-bar app color="white">
				<v-list-item>
					<v-list-item-content style="padding: 0;">
						<v-list-item-title class="headline"><img src="../../../static/index/logo.png" alt="fail" style="width: 80px;height: 30px;margin: 0 auto;"></v-list-item-title>
						<span @click="search = true" style="position:absolute;z-index:100;left:5px; color: #747577;">
							<icon name="position" scale="2" color="white" @click="search = true"></icon><span v-html="city"></span>
						</span>
					</v-list-item-content>
				</v-list-item>
			</v-app-bar> -->

			<v-card class="mx-auto" style="width:100%;" outlined>
				<v-list-item>
					<v-list-item-content style="padding: 0;">
						<v-list-item-title class="headline"><img src="../../../static/index/logo.png" alt="fail" style="width: 80px;height: 30px;margin: 0 auto;"></v-list-item-title>
						<span @click="search = true" style="position:absolute;z-index:100;left:5px; color: #747577;">
							<icon name="position" scale="2" color="white" @click="search = true"></icon><span v-html="city"></span>
						</span>
					</v-list-item-content>
				</v-list-item>
			</v-card>

			<!-- 轮播图 -->
			<v-carousel :show-arrows="false" :cycle="true" height="60vw">
				<v-carousel-item v-for="(item,i) in itemImage" :key="i" :src="item" reverse-transition="fade-transition" transition="fade-transition"></v-carousel-item>
			</v-carousel>
			<!-- 搜索弹窗 -->
<!-- 			<el-dialog title="选择区域" :visible.sync="search" width="80%" top="20vh">
				<div>
					<el-cascader :show-all-levels="false" :props="props" style="padding: 3px;width: 100%;" placeholder="选择区域" v-model="partyOrganId"
						prefix-icon="el-icon-office-building"></el-cascader>
					{{partyOrganId}} -->
					<!-- 			<el-date-picker :clearable="false" :picker-options="pickerOptions0" value-format="yyyy-MM-dd" v-model="startTime"
				type="date" @change="showEndTime()" placeholder="入住时间" style="padding: 3px;width: 100%;"></el-date-picker>

			<el-date-picker :clearable="false" :picker-options="pickerOptions1" value-format="yyyy-MM-dd" v-model="endTime"
				v-show="showDate" type="date" placeholder="离开时间" style="padding: 3px;width: 100%;"></el-date-picker>
			<div style="width: 100% ;padding: 3px;height: auto"> -->
					<!--                    TODO 有时间需要链接地图-->
					<!-- 				<span style="float: left">
					<i class="el-icon-location"></i>
				</span>
				<span style="float: left; margin-left: 8px">位置/地名</span> -->
					<!--                     将要跳转页面的房屋例表页面-->
	<!-- 				<div style="padding-top:4px">
						<span>
							<el-button style="float: right;padding: 3px;background-color:#FF5252;color: #f2f2f2" plain @click="goHouse()">搜索</el-button>
						</span>
					</div>
				</div>
			</el-dialog> -->

			<div style="margin: 0 auto;width: 100%;">
				<div class="aui-palace aui-palace-one">
					<a href="javascript:;"  @click="goHouse()" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="../../../static/index/nav-001.png" alt />
						</div>
						<div class="aui-palace-grid-text">
							<h2 >合租</h2>
						</div>
					</a>
					<a href="javascript:;"  @click="goHouse()" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="../../../static/index/nav-002.png" alt />
						</div>
						<div class="aui-palace-grid-text">
							<h2>整租</h2>
						</div>
					</a>
					<a href="javascript:;"  @click="goHouse()" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="../../../static/index/nav-003.png" alt />
						</div>
						<div class="aui-palace-grid-text">
							<h2>套房</h2>
						</div>
					</a>
					<a href="javascript:;" @click="goHouse()" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="../../../static/index/nav-004.png" alt />
						</div>
						<div class="aui-palace-grid-text">
							<h2>找房</h2>
						</div>
					</a>
					<a href="javascript:;" @click="goLease()" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="../../../static/index/nav-005.png" alt />
						</div>
						<div class="aui-palace-grid-text">
							<h2>房东</h2>
						</div>
					</a>
				</div>
				<div class="aui-flex">
					<div class="aui-flex-box aui-flex-box-one">
						<div class="aui-ad-one-img">
							<img src="../../../static/index/se-001.png" alt />
						</div>
					</div>
					<div class="aui-flex-box aui-flex-box-two">
						<div class="aui-ad-two-img">
							<img src="../../../static/index/se-002.png" alt />
						</div>
						<div class="aui-three-img">
							<div class="aui-fl-img">
								<img src="../../../static/index/se-003.png" alt />
							</div>
							<div class="aui-fr-img">
								<img src="../../../static/index/se-004.png" alt />
							</div>
						</div>
					</div>
				</div>
				<div class="aui-flex b-line">
					<div class="aui-flex-box">
						<h1>全部房源</h1>
					</div>
					<div class="aui-arrow">
						<span @click="goHouse()">更多</span>
					</div>
				</div>
				<div v-for="(item,i) in house_list" :key="i">
					<v-list-item three-line @click="goHouseDel(item.house_id)">
						<v-list-item-avatar tile size="100" width="130" class="image_border_list"><img :src="item.index_image_url" alt="未加载" />
						</v-list-item-avatar>
						<v-list-item-content>
							<v-list-item-title class="headline mb-1"><span style="font-size: 16px;">{{item.title}}</span></v-list-item-title>
							<v-list-item-subtitle><span>{{item.area_name}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{item.lease_type}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{item.acreage}}m²</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{item.renovation}}</span></v-list-item-subtitle>
							<div class="overline" style="color:#FF5252">{{item.month_price}}元/月</div>
						</v-list-item-content>
					</v-list-item>
				</div>
			</div>
		</v-app>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Mine",
		data() {
			return {
				dark: false,
				showDate: false,
				now: null,
				input1: "",
				model: "",
				startTime: "",
				endTime: "",
				showTime: "",
				search: false,
				city: '思明区',
				item: [],
				house_list: [],
				background: require("../../../static/index/home.jpg"),
				itemImage: [
					require("../../../static/index/ba_003.jpg"),
					require("../../../static/index/ba_001.jpg"),
					require("../../../static/index/ba_002.jpg"),
					require("../../../static/index/ba_004.jpg")
				],
				pickerOptions0: {
					disabledDate: time => {
						if (
							new Date(this.startTime).getTime() >=
							new Date(this.endTime).getTime()
						) {
							this.endTime = "";
						}
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
				// :picker-options  设置日期的选择范围
				//new Date(this.endTime).getTime()   表示endtime的时候戳
				pickerOptions1: {
					disabledDate: time => {
						if (
							new Date(this.endTime).getTime() <
							new Date(this.startTime).getTime()
						) {
							this.startTime = "";
						}
						if (this.startTime) {
							return (
								time.getTime() < new Date(this.startTime).getTime() ||
								time.getTime() < Date.now() - 8.64e7
							);
						} else {
							return time.getTime() < Date.now() - 8.64e7;
						}
					}
				},
				partyOrganId: [],

				// 父主键向下传递给值给子组件
				props: {
					lazy: true,
					lazyLoad(node, resolve) {
						setTimeout(() => {
							if (node.level === 0) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/province", //请求地址
										params: {}
									})
									.then(res => {
										const province = res.data.data.map(value => ({
											value: value.pid,
											label: value.name,
											leaf: node.level >= 2
										}));
										resolve(province);
									})
									.catch(err => {
										console.log(err);
									});
							}
							if (node.level === 1) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/city", //请求地址
										params: {
											pid: node.value
										}
									})
									.then(res => {
										console.log(res.data);
										const city = res.data.data.map(value => ({
											value: value.cid,
											label: value.cname,
											leaf: node.level >= 2
										}));
										// 通过调用resolve将子节点数据返回，通知组件数据加载完成
										resolve(city);
									})
									.catch(err => {
										console.log(err);
									});
							}
							if (node.level === 2) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/area", //请求地址
										params: {
											cid: node.path[1]
										}
									})
									.then(res => {
										const area = res.data.data.map(value => ({
											value: value.aid,
											label: value.aname,
											leaf: node.level >= 2
										}));
										// 通过调用resolve将子节点数据返回，通知组件数据加载完成
										resolve(area);
									})
									.catch(err => {
										console.log(err);
									});
							}
						}, 500);
					}
				}
			};
		},

		methods: {
			showEndTime() {
				this.showDate = true;
			},
			goHouse() {
				// this.$router.push({
				// 	name: "房屋列表",
				// 	query:{aid:this.partyOrganId[this.partyOrganId.length - 1]}
				// });
				this.$router.push({
					path: "/housing_list"
				});
				
			},
			goLease() {

				this.$router.push({
					path: "/main/lease"
				});
				
			},
			
			//保存房屋id 渲染对应的房屋详情界面
			goHouseDel(house_id) {
				// localStorage.setItem('data', id);
				this.$router.push({
					name: "房屋详情",
					query:{house_id:house_id}
				});
			}
		},
		mounted() {
			let _this = this;
			axios
				.get("/api/v1.0/house/get_house_index")
				.then(function(response) {
					if (response.data.errno == '0') {
						_this.house_list = response.data.data
						console.log(response.data.data)
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		}
	};
</script>

<style scoped>
	@import "../../assets/css/style.css";

	.box-card {
		width: 90%;
		margin: 0px auto;
	}
</style>
<style>
	.el-cascader-menu {
		min-width: 60px !important;
	}

	.el-button {
		border: 0;
		width: 50px;
	}

	.el-dialog__body {
		padding-top: 10px;
	}
</style>
